<template>
    <div class="user">
        <el-form label-position="right" :rules="rules" label-width="70px" ref="formRules" :model="list">
            <el-form-item label="头像" style="width: 500px;" prop="logo" class="logo">
                <UploadImage :card="false" :alertShow="false" :showFileList="false" @getImageList="getImageList">
                    <el-avatar :size="50" :src="user.logo" />
                </UploadImage>
            </el-form-item>
            <el-form-item label="用户名" prop="title" style="width: 500px;">
                {{ user.username }}
            </el-form-item>
            <el-form-item label="旧密码" style="width: 500px;" prop="oldPassword">
                <el-input v-model="list.oldPassword" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="新密码" style="width: 500px;" prop="newPassword">
                <el-input v-model="list.newPassword" placeholder="请输入" />
            </el-form-item>
            <el-form-item style="width: 500px;">
                <el-button type="primary" @click="editPassword(formRules)">提 交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { useStore } from '@/store';
import logo from '@/assets/images/user.png';
import UploadImage from '@/components/UploadImage';
import { ElMessage } from 'element-plus';
import { handleUser, editUserPassword } from '@/api/user';

let user = useStore().user;
if (!user.logo) user.logo = logo;

// 修改用户头像
let editUserLogo = () => {
    handleUser(user).then(res => {
        ElMessage({ type: 'success', message: res.info });
    })
}

// 获取图片
let getImageList = (images) => {
    if (images.length) {
        user.logo = images[0].url;
        useStore().user.logo = images[0].url;
        editUserLogo();
    } else list.value.image = '';
}

// 修改密码
let list = ref({}),
    formRules = ref();
let rules = {
    oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
    newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
}
let editPassword = (formRules) => {
    formRules.validate((valid, fields) => {
        if (valid) {
            list.value.username = user.username;
            editUserPassword(list.value).then(res => {
                ElMessage({ type: 'success', message: res.info });
                list.value = {};
            })
        }
    })

}
</script>
<style lang="scss" scoped>
.user {
    margin-top: 15px;
    padding: 20px;

    :deep(.el-form) {

        .el-form-item {
            align-items: center;
        }
    }
}
</style>